<template>
  <px-dialog v-model="isVisible" class="equip-dialog" title="选择关联出库单" width="1200px" @open="openDialog" @close="closeDialog">
    <div class="equip-wrap-common">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="100px">
        <px-row :gutter="16">
          <px-col :span="6">
            <px-form-item label="出库单号">
              <px-input
                v-model="queryParams.outNum"
                placeholder="请输入出库单号"
                autocomplete="off"
                maxlength="50"
                @blur="queryParams.outNum = $event.target.value.trim()"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="出库主题">
              <px-input
                v-model="queryParams.outName"
                placeholder="请输入出库主题"
                autocomplete="off"
                maxlength="50"
                @blur="queryParams.outName = $event.target.value.trim()"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="出库日期" prop="outDate">
              <px-date-picker
                v-model="queryParams.outDate"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate"
              />
            </px-form-item>
          </px-col>
          <px-col :span="4">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-table :data="tableData" class="equip-table" size="small" max-height="340px" border highlight-current-row @row-click="handleRowClick">
        <px-table-column type="index" width="60" label="序号" fixed>
          <template #default="scope">
            <px-radio v-model="selectRow" :label="scope.$index + 1" size="large" @change="handelRadio(scope.$index, scope.row)" />
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <px-button v-if="item.num" link type="primary">
              {{ scope.row.outNum }}
            </px-button>
            <span v-else-if="item.approvalStatus">
              <px-tag
                v-if="scope.row.approvalStatus"
                effect="plain"
                :style="{
                  color: `${tagColorList[scope.row.approvalStatus]}`,
                  border: `1px solid ${tagBorderColorList[scope.row.approvalStatus]}`,
                  backgroundColor: `${tagBgColorList[scope.row.approvalStatus]}`
                }"
              >
                {{ scope.row.approvalStatusDesc }}
              </px-tag>
              <span v-else> {{ scope.row.approvalStatusDesc || "-" }} </span>
            </span>
            <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="tool-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <div style="margin-top: 16px; text-align: right">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit">确认</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { searchTreeLedger } from "@/api/erc/equip";
import { querySparePartsOutbound } from "@/api/erc/spareParts";
import { computed, reactive, toRefs } from "vue";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "facCode"]);

const isVisible = computed(() => props.visible);

const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  total: 0,
  tableColumns: [
    { prop: "outNum", label: "出库单号", minWidth: "160", showOverflowTooltip: true, fixed: "left", num: true },
    { prop: "outName", label: "出库主题", minWidth: "140", showOverflowTooltip: true },
    { prop: "usedDesc", label: "出库类型", minWidth: "100", showOverflowTooltip: true },
    { prop: "billNum", label: "关联单号", minWidth: "140", showOverflowTooltip: true },
    { prop: "outDate", label: "申请时间", minWidth: "180", showOverflowTooltip: true },
    { prop: "createName", label: "操作人", minWidth: "120", showOverflowTooltip: true },
    { prop: "approverName", label: "出库审核人", minWidth: "120", showOverflowTooltip: true },
    { prop: "approvalStatus", label: "审核状态", minWidth: "120", showOverflowTooltip: true, approvalStatus: true }
  ],
  selectedData: null,
  treeData: [],
  selectRow: ""
});
const { queryParams, tableData, total, tableColumns, selectedData, treeData, selectRow } = toRefs(state);

const tagColorList = {
  pass: "#10B981",
  approving: "#F59E0B",
  reject: "#EF4444"
};

const tagBorderColorList = {
  pass: "#B7EAD9",
  approving: "#FCE2B6",
  reject: "#FAC7C7"
};

const tagBgColorList = {
  pass: "#E8F8F3",
  approving: "#FEF5E6",
  reject: "#FEECEC"
};

// 获取开始日期及结束日期
const changeDate = val => {
  queryParams.value.startTime = val[0];
  queryParams.value.endTime = val[1];
};

const handleRowClick = row => {
  selectedData.value = row;
};

const handelRadio = (index, row) => {
  selectRow.value = index + 1;
  selectedData.value = row;
};

const queryTree = async () => {
  const data: any = await searchTreeLedger({
    name: ""
  });
  treeData.value = data;
};

// 查询备件列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  // isFilter 过滤掉那些已经被使用过的出库单
  const data = await querySparePartsOutbound({ facCode: props.facCode, ...params, isFilter: true });
  tableData.value = data?.data || [];
  total.value = data?.total;
};

// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    facCode: "",
    outNum: "",
    outName: "",
    startTime: "",
    endTime: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};

// 打开弹窗
const openDialog = () => {
  queryTree();
  queryTable();
};
// 查询列表关闭弹窗
const closeDialog = () => {
  selectRow.value = "";
  selectedData.value = null;
  emits("closeDialog");
};

const handleSubmit = () => {
  emits("closeDialog", selectedData.value);
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/table-list.scss");

.equip-wrap-common {
  height: auto;
  padding: 0;
  .equip-form {
    padding-top: 0;
  }
}
</style>
